import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Card, Icon, Pagination, Switch, Tabs} from 'antd'
import {changeStatus, getNotifications, markAllAsRead} from '../../action/notification'
import {FormattedMessage} from 'react-intl'
import {getLangFromLocalStorage} from '../../constant/lang-util'

const TabPane = Tabs.TabPane
const TUTOR_COMMENT_ASSIGNMENT = 'TUTOR_COMMENT_ASSIGNMENT'
const STUDENT_COMMENT_ASSIGNMENT = 'STUDENT_COMMENT_ASSIGNMENT'

class Index extends Component {

    state = {
        currentReadPaginationPage: 1
    }

    getNotifications(status) {
        const {user} = this.props
        this.props.getNotifications(user.id, status)
    }

    handleMarkAllClink() {
        const {user} = this.props
        this.props.markAllAsRead(user.id)
    }

    handleReadPaginationChange(currentReadPaginationPage) {
        const {user} = this.props
        this.setState({currentReadPaginationPage}, () => {
            this.props.getNotifications(user.id, 'read', currentReadPaginationPage)
        })
    }

    render() {
        const {user, notifications} = this.props
        const {read, unRead} = notifications
        const unReadReply = unRead.filter(item => item.type === TUTOR_COMMENT_ASSIGNMENT || item.type === STUDENT_COMMENT_ASSIGNMENT)
        const lang = getLangFromLocalStorage()

        return <div className='notification-box'>
            <a href='javascript:void(0)'
               className='notification-box__goback-link'
               onClick={() => this.props.history.goBack()}>
                <Icon type='left'/> <FormattedMessage id='回到之前页面'/>
            </a>
            <a href='javascript:void(0)'
               onClick={this.handleMarkAllClink.bind(this)}
               className='notification-mark-all'>
                <FormattedMessage id='标记全部为已读'/>
            </a>
            <Tabs onChange={this.getNotifications.bind(this)}>
                <TabPane tab={<FormattedMessage id='全部未读'/>} key='unRead'>
                    {unRead.map(item => {
                        return <Card key={item.id}>
                            <a href={item.url || 'javascript:void(0)'}
                               onClick={() => this.props.changeStatus(item.id, user.id, 'unRead')}>
                                <p><Icon type='notification'
                                         className='margin-r-1'/> {item[`message_${lang}`] || item.message}
                                </p>
                            </a>
                            <span style={{float: 'right'}}>{item.createTime}</span>

                            <Switch checkedChildren='' unCheckedChildren={<FormattedMessage id='标为已读'/>}
                                    onChange={() => this.props.changeStatus(item.id, user.id, 'unRead')}/>
                        </Card>
                    })}
                </TabPane>

                <TabPane tab={<FormattedMessage id='未读回复'/>} key='unReadReply'>
                    {unReadReply.map(item => {
                        return <Card key={item.id}>
                            <a href={item.url || 'javascript:void(0)'}
                               onClick={() => this.props.changeStatus(item.id, user.id, 'unRead')}>
                                <p><Icon type='notification'
                                         className='margin-r-1'/> {item[`message_${lang}`] || item.message}
                                </p>
                            </a>
                            <span style={{float: 'right'}}>{item.createTime}</span>

                            <Switch checkedChildren='' unCheckedChildren={<FormattedMessage id='标为已读'/>}
                                    onChange={() => this.props.changeStatus(item.id, user.id, 'unRead')}/>
                        </Card>
                    })}
                </TabPane>

                <TabPane onChange={this.getNotifications.bind(this, 'read')} tab={<FormattedMessage id='已读'/>}
                         key='read'>
                    {read.content.map(item => {
                        return <Card key={item.id} className='notification-item'>
                            <a href={item.url || 'javascript:void(0)'}>
                                <p><Icon type='notification'
                                         className='margin-r-1'/> {item[`message_${lang}`] || item.message}
                                </p>
                            </a>
                            <span style={{float: 'right'}}>{item.createTime}</span>

                            <Switch checkedChildren='' unCheckedChildren={<FormattedMessage id='标为未读'/>}
                                    onChange={() => this.props.changeStatus(item.id, user.id, 'read')}/>
                        </Card>
                    })}
                    <Pagination
                        className='notification-box_read-pagination'
                        defaultCurrent={1}
                        onChange={this.handleReadPaginationChange.bind(this)}
                        total={read.totalElements}/>
                </TabPane>
            </Tabs>
        </div>
    }
}

const mapStateToProps = ({user, notifications}) => ({
    notifications,
    user
})

const mapDispatchToProps = dispatch => ({
    getNotifications: (userId, status, page) => dispatch(getNotifications(userId, status, page)),
    changeStatus: (notificationId, userId, status) => dispatch(changeStatus(notificationId, userId, status)),
    markAllAsRead: (userId) => dispatch(markAllAsRead(userId))
})

export default connect(mapStateToProps, mapDispatchToProps)(Index)
